<template>
  <div class="TemplateDetail">
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="模板名称" prop="templateName">
        <a-input v-model="form.templateName"></a-input>
      </a-form-model-item>
      <a-form-model-item label="模板内容" prop="templateContent">
        <a-textarea
          v-model="form.templateContent"
          :auto-size="{ minRows: 10, maxRows: 15 }"
        />
      </a-form-model-item>
      <a-form-model-item label="动态模板" prop="dynamicTemplate">
        <a-switch class="m-l-md" checked-children="开" un-checked-children="关" default-checked v-model="form.dynamicTemplate"/>
      </a-form-model-item>
      <a-row>
        <a-col :span="19">
          <a-form-model-item label="数据服务" prop="dataServiceName" :label-col="{span:5}" :wrapper-col="{span:18}">
            <a-input v-model="form.dataServiceName" disabled></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="5">
          <a-button @click="selectSqlConfig" style="margin-top: 3px">选择</a-button>
        </a-col>
      </a-row>
    </a-form-model>
  </div>
</template>

<script>
export default {
  name: 'TemplateDetail',
  data () {
    return {
      form: {
        dynamicTemplate: false
      },
      rules: {},
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      selectedSqlConfig: {}
    }
  },
  props: {
    template: {
      type: Object,
      default: () => {}
    }
  },
  created () {
    this.form = Object.assign(this.form, this.template)
  },
  methods: {
    selectSqlConfig () {
      const _this = this
      this.$dialog({
        title: '选择数据服务',
        content: () => import('./SelectSqlConfig'),
        width: 700,
        centered: true,
        maskClosable: false,
        on: {
          ok (ctl) {
            const dialogCtl = ctl.getDialogCtl()
            _this.selectedSqlConfig = dialogCtl.tableData[dialogCtl.activeIndex] || {}
            if (_this.selectedSqlConfig.id) {
              _this.$delete(_this.form, 'dataServiceId')
              _this.$delete(_this.form, 'dataServiceName')
              _this.$set(_this.form, 'dataServiceId', _this.selectedSqlConfig.id)
              _this.$set(_this.form, 'dataServiceName', _this.selectedSqlConfig.name)
            }
            ctl.closeDialog()
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.TemplateDetail{
  max-height: 550px;
  overflow-y: auto;
}
</style>
